<template>
  <div class="page-container">
    <SearchForm
        :search-list="searchList"
        :search-params="searchParams"
        @search="onSearch"
        @reset="onReset"
    />
    <div class="table-box" style="overflow-y:auto">
      <el-row :gutter="12">
      <el-col :span="24" v-for="(item,index) in tableData" :key="index" style="margin-bottom: 12px">
        <el-card :body-style="{ padding: '0px' }" shadow="none" >
          <div style="display: flex;align-items: center">
            <img :src="item.image" style="width: 100px;height: 80px">
            <div style="padding: 14px;height: 100px;flex-grow: 1">
              <div>{{ item.title }}</div>
              <div>{{ item.desc }}</div>
            </div>
            <div class="edit">
              <el-button type="text" @click="toDetail(item)">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
     </div>

    <div class="page-box">
      <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
      />
    </div>
  </div>
</template>
<script>

export default {
  name: "index",
  data() {
    return {
      searchList: [
        {
          key: 'nickname',
          name: 'input',
          label: '姓名'
        }
      ],
      searchParams: {
        name: ''
      },
      pageNo: 1,
      pageSize: 12,
      pageSizes: [12, 20, 30, 40, 50],
      totalSize: 0,
      tableData: []
    }
  },
  created() {
    this.onSearch()
  },
  methods: {
    initData() {
      let tableData = [
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        },
        {
          id: 1,
          image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '这是一个博客标题',
          desc: '这是一段博客描述'
        }
      ]
    // 根据分页，查询条件过滤
      let list = tableData.filter(item => {
        let flag = true
        if (this.searchParams.name) {
          flag = item.title.includes(this.searchParams.name)
        }
        return flag
      })
      // 分页
      let start = (this.pageNo - 1) * this.pageSize
      let end = start + this.pageSize
      this.tableData = list.slice(start, end)
      this.totalSize = tableData.length
      console.log('this.tableData',this.tableData)
    },
    onSearch() {
      console.log('search')
      this.pageNo = 1
      this.initData()
    },
    onReset() {
       this.searchParams = {
         name: ''
       }
    },
    changePageNo(pageNo) {
      this.pageNo = pageNo
      this.initData()
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize
      this.pageNo = 1
      this.initData()
    },
    toDetail(item) {
      this.$router.push({
        path: '/articleDetail',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
